<template>
  <div>
    <h1>生命周期</h1>   
    <p>count:{{count}}</p>
    <input type="button" value="修改count" @click="changeCount">
    <hr/>
  </div>
</template>


<script>

import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated} from "vue";

// 在组合式api中，
// 1、没有beforeCreate和created这两个钩子，曾经在这两个钩子里写的代码，现在直接写在setup函数内部
// 2、钩子函数的执行顺序：
// setup();
// onBeforeMount()
// onMounted()
// onBeforeUpdate();
// onUpdated();

export default {
  setup(){    
    
    console.log("setup");
    let count = ref(9);
    function changeCount(){
      count.value++;
    }

    onBeforeMount(()=>{
      console.log("onBeforeMount");
    })

    onMounted(()=>{
      console.log("onMounted");
    })
    
    onBeforeUpdate(()=>{
      console.log("onBeforeUpdate");
    })

    onUpdated(()=>{
      console.log("onUpdated");
    })

    return {
      count,changeCount
    }

  }

 

}

</script>

<style scoped>

</style>